<!-- main -->
<div class="row">
    <div class="col-sm-12">
      <div class="box box-primary">
        <div class="table-scroll-content">
          <table class="table table-bordered table-hover table-striped table-keep-line">
              <thead>
                <tr>
                    <th>题目编号</th>
                    <th>题目名称</th>
                    <th>选题人学号</th>
                    <th>选题人姓名</th>
                    <th>状态</th>
                    <th>确认或取消</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let title of Titles">
                    <td>{{title.TitleId}}</td>
                    <td><a (click)="showDetail(title)" style="text-decoration:underline">{{title.TitleName}}</a></td>
                    <td>{{title.StudentId}}</td>
                    <td>{{title.StudentName}}</td>
                    <td *ngIf="title.TitleStatus==0 || title.TitleStatus==null" style="color:gray">未被选</td>
                    <td *ngIf="title.TitleStatus==1" style="color:#FF7B00">待确认</td>
                    <td *ngIf="title.TitleStatus==2" style="color:green">已被选</td>
                    <td>
                        <button class="btn btn-success btn-xs" (click)="subTitle(title)">确认</button>
                        <button class="btn btn-danger btn-xs" (click)="reTitle(title)">取消</button>
                    </td>
                </tr>
              </tbody>
          </table>
        </div>
      </div>
    </div>
</div>

<!-- 详情模版 -->
<div class="modal fade" id="showTitle" tabindex="-1" role="dialog" aria-labelledby="详情">
    <div class="modal-dialog" role="document">
        <div class="modal-content col-sm-12">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">题目详情</h4>
            </div>
            <div class="modal-body">
                <span><strong>题目:</strong></span>
                <p>{{titleInfo.TitleName}}</p>
                <span><strong>题目详情:</strong></span>
                <p>{{titleInfo.TitleDetail}}</p>
                <span><strong>题目要求:</strong></span>
                <p>{{titleInfo.TitleRequire}}</p>
            </div>
        </div>
    </div>
</div>